<template>
	<div class="container">
		<div class="abs">
			<el-page-header @back="$router.go(-1)" content="">
			</el-page-header>
		</div>
		<div id="main">
		</div>
	</div>
</template>
<script>
// 导入请求数据的 baseurl
import baseUrl from '@/utils/urlconfig'
export default {
  name: 'Echarts',
  data () {
    return {}
  },

  methods: {
    async myEcharts () {
	  var echarts = require('echarts')
	  var $ = require('jquery')
      //   var ROOT_PATH =
		  // 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'

      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option
      myChart.resize({
		  width: 1200,
		  height: 800
      })
      const indices = {
		  name: 0,
		  group: 1,
		  id: 16
      }
      const schema = [{ name: '热量', index: 0 },
        { name: '脂肪', index: 1 },
        { name: '蛋白质', index: 2 },
        { name: '碳水化合物', index: 3 },
        { name: '膳食纤维', index: 4 },
        { name: '硫胺素', index: 5 },
        { name: '钙', index: 6 },
        { name: '核黄素', index: 7 },
        { name: '镁', index: 8 },
        { name: '烟酸', index: 9 },
        { name: '铁', index: 10 },
        { name: '维生素C', index: 11 },
        { name: '锰', index: 12 },
        { name: '维生素E', index: 13 },
        { name: '锌', index: 14 },
        { name: '维生素A', index: 15 },
        { name: '胆固醇', index: 16 },
        { name: '铜', index: 17 },
        { name: '胡罗卜素', index: 18 },
        { name: '钾', index: 19 },
        { name: '磷', index: 20 },
        { name: '视黄醇当量', index: 21 },
        { name: '钠', index: 22 },
        { name: '硒', index: 23 }
      ]
      // const groupCategories = []
      //   const groupCategories1 = ['乳制品和蛋制品',
		  //   '香料和香草',
		  //   '婴儿食品',
		  //   '油脂',
		  //  ' 家禽产品',
		  //   '汤、酱汁和肉汁',
		  //   '香肠和午餐肉',
		  //   '早餐麦片',
		  //   '水果和果汁',
		  //   '猪肉制品',
		  //   '蔬菜和蔬菜制品',
		  //   '坚果和种子产品',
		  //   '牛肉制品饮料',
		  //   '鳍类和贝类产品',
		  //   '豆类和豆类产品',
		  //   '羊肉、小牛肉和野味产品',
		  //   '烘焙产品',
		  //   '糖果',
		  //   '谷物和意大利面',
		  //   '快餐',
		  //   '饭菜、主菜和配菜',
		  //   '零食',
		  //   '民族食品',
		  //   '餐厅食品'
		  // ]
      // const groupColors = []
      // $.get("http://192.168.84.58:8000/Store/FNutrition", function (data) {
      //   // $.get(ROOT_PATH + '/data/asset/data/nutrients.json', function (data) {
      //   // console.log(data)
      //   var data = data.data
      //   normalizeData(data)
      //   myChart.setOption((option = getOption(data)))
      // })
	  const groupCategories = []
	  const groupColors = []
	  var url = baseUrl + '/Store/FNutrition'
	  $.get(url, function (data) {
	    data = data.data
        console.log(data)
	    normalizeData(data)
	    myChart.setOption((option = getOption(data)))
	  })
      function normalizeData (originData) {
        const groupMap = {}
        originData.forEach(function (row) {
          const groupName = row[indices.group]
          // if (!groupMap.hasOwnProperty(groupName)) {
          if (!Object.prototype.hasOwnProperty.call(groupMap, groupName)) {
            groupMap[groupName] = 1
          }
        })
        originData.forEach(function (row) {
          row.forEach(function (item, index) {
            if (
              index !== indices.name &&
              index !== indices.group &&
              index !== indices.id
            ) {
              // Convert null to zero, as all of them under unit "g".
              row[index] = parseFloat(item) || 0
            }
          })
        })
        for (const groupName in groupMap) {
          // if (groupMap.hasOwnProperty(groupName)) {
          if (Object.prototype.hasOwnProperty.call(groupMap, groupName)) {
            groupCategories.push(groupName)
          }
        }
        const hStep = Math.round(300 / (groupCategories.length - 1))
        for (var i = 0; i < groupCategories.length; i++) {
          groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i))
        }
      }
      function getOption (data) {
        const lineStyle = {
          width: 0.5,
          opacity: 0.05
        }
        return {
          backgroundColor: '#100c2a',
          tooltip: {
            padding: 10,
            backgroundColor: '#222',
            borderColor: '#777',
            borderWidth: 1
          },
          title: [
            {
              text: 'Groups',
              top: 0,
              left: 0,
              textStyle: {
                color: '#fff'
              }
            }
          ],
          visualMap: {
            show: true,
            type: 'piecewise',
            categories: groupCategories,
            dimension: indices.group,
            inRange: {
              color: groupColors // ['#d94e5d','#eac736','#50a3ba']
            },
            outOfRange: {
              color: ['#ccc'] // ['#d94e5d','#eac736','#50a3ba']
            },
            top: 20,
            height: 900,
            textStyle: {
              color: '#fff'
            },
            realtime: false
          },
          parallelAxis: [
            { dim: 2, name: schema[0].name, nameLocation: 'end' },
            { dim: 3, name: schema[1].name, nameLocation: 'end' },
            { dim: 4, name: schema[2].name, nameLocation: 'end' },
            { dim: 5, name: schema[3].name, nameLocation: 'end' },
            { dim: 6, name: schema[4].name, nameLocation: 'end' },
            { dim: 7, name: schema[5].name, nameLocation: 'end' },
            { dim: 8, name: schema[6].name, nameLocation: 'end' },
            { dim: 9, name: schema[7].name, nameLocation: 'end' },
            { dim: 10, name: schema[8].name, nameLocation: 'end' },
            { dim: 11, name: schema[9].name, nameLocation: 'end' },
            { dim: 12, name: schema[10].name, nameLocation: 'end' },
            { dim: 13, name: schema[11].name, nameLocation: 'end' },
            { dim: 14, name: schema[12].name, nameLocation: 'end' },
            { dim: 15, name: schema[13].name, nameLocation: 'end' },
            { dim: 16, name: schema[14].name, nameLocation: 'end' },
            { dim: 17, name: schema[15].name, nameLocation: 'end' },
            { dim: 18, name: schema[16].name, nameLocation: 'end' },
            { dim: 19, name: schema[17].name, nameLocation: 'end' },
            { dim: 20, name: schema[18].name, nameLocation: 'end' },
            { dim: 21, name: schema[19].name, nameLocation: 'end' },
            { dim: 22, name: schema[20].name, nameLocation: 'end' },
            { dim: 23, name: schema[21].name, nameLocation: 'end' },
            { dim: 24, name: schema[22].name, nameLocation: 'end' },
            { dim: 25, name: schema[23].name, nameLocation: 'end' }
          ],
          parallel: {
            left: 120,
            top: 20,
            // top: 150,
            // height: 1200,
            width: 800,
            layout: 'vertical',
            parallelAxisDefault: {
              type: 'value',
              name: 'nutrients',
              nameLocation: 'end',
              nameGap: 20,
              nameTextStyle: {
                color: '#fff',
                fontSize: 14
              },
              axisLine: {
                lineStyle: {
                  color: '#aaa'
                }
              },
              axisTick: {
                lineStyle: {
                  color: '#777'
                }
              },
              splitLine: {
                show: false
              },
              axisLabel: {
                color: '#fff'
              },
              realtime: false
            }
          },
          grid: {
            right: 'center',
            top: 'center'
					  },
          animation: false,
          series: [
            {
              name: '单位(mg)',
              type: 'parallel',
              lineStyle: lineStyle,
              inactiveOpacity: 0,
              activeOpacity: 0.01,
              progressive: 500,
              smooth: true,
              data: data
            }
          ]
        }
      }
      option && myChart.setOption(option)
    }
  },
  created () {},
  mounted () {
    this.myEcharts()
  }
}
</script>

<style scoped>
	body {
		margin: 0;
	}

	.container {
		position: relative;
		width: 10rem;
		/* height: 5.625rem; */
		height: 10rem;
		margin: 0 auto;
		background: #100c2a;
		border: 1px solid #797979;
	}

	#main {
		position: absolute;
		/* top:50px;
		left:50px; */
		top:100px;
		left: 50%;
		width: 7.5rem;
		height: 5rem;
		transform: translate(-50%,00%);
		z-index: 1;
	}
</style>
